<template>
  <div class="content-wrapper">
    <div class="nav">
      <el-breadcrumb>
        <el-breadcrumb-item :to="{ path: '/administration-recruitModel' }">HR招聘</el-breadcrumb-item>
        <el-breadcrumb-item>招聘流程步骤</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="content">
      <el-card v-for="item in modelSteps" :key="item.step">
        <div slot="header" class="clearfix">
          <span>招聘流程步骤{{item.step}}</span>
          <el-button style="float: right; padding: 3px 0" type="text" @click="submitStep(item)" v-if="canEdit">保存</el-button>
        </div>
        <el-form label-width="80px">
          <el-form-item label="步骤名称" :rules="[{ required: true }]">
            <el-input v-model="item.stepName" :disabled="!canEdit"></el-input>
          </el-form-item>
          <el-form-item label="操作人">
            <el-tooltip class="item" effect="dark" :content="item.candidatesName" placement="bottom-start" v-if="item.candidatesIdsArr && item.candidatesIdsArr.length > 0">
              <el-input v-model="item.candidatesName" disabled>
                <el-button slot="append" @click="resetUsers('candidatesId','candidatesName','candidatesIdsArr', 'candidatesNamesArr', item)">清空</el-button>
                <el-button slot="append" @click="selectDingUsers('candidatesId','candidatesName','candidatesIdsArr', 'candidatesNamesArr', item, Number(item.candidatesLimit))">选择</el-button>
              </el-input>
            </el-tooltip>
            <el-input v-model="item.candidatesName" disabled v-else>
              <el-button slot="append" @click="selectDingUsers('candidatesId','candidatesName','candidatesIdsArr', 'candidatesNamesArr', item, Number(item.candidatesLimit))">选择</el-button>
            </el-input>
          </el-form-item>
          <el-form-item label="限制人数" :rules="[{ required: true }]">
            <el-input type="number" v-model="item.candidatesLimit" @wheel.native.prevent="stopScrollFun($event)" :disabled="!canEdit"></el-input>
          </el-form-item>
          <el-form-item label="操作逻辑">
            <el-radio-group v-model="item.logic" :disabled="!canEdit">
              <el-tooltip class="item" effect="dark" content="任意一名操作人操作" placement="bottom">
                <el-radio label="0">或</el-radio>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="全部操作人操作" placement="bottom">
                <el-radio label="1">与</el-radio>
              </el-tooltip>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="item.remark" :disabled="!canEdit"></el-input>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
import formUtil from '@/utils/formUtil'
import dingMixin from  '@/mixins/ding'
export default {
  name: '',
  data () {
    return {
      modelSteps: [],
    };
  },
  components: {},
  mixins: [dingMixin],
  computed: {
    canEdit() {
      return this.isAuth('recruitment:auditmodel:update')
    }
  },
  mounted () {
    this.getModelList();
  },
  methods: {
    async getModelList() {
      let list = await this.$httpN.postB('hr/recruitment/model/info?id=3')
      if(typeof list === 'undefined' || typeof list === 'boolean') return
      list.modelSteps.forEach(item => {
        item.candidatesIdsArr = item.candidatesId === '' ? [] : item.candidatesId.split(",")
        item.candidatesNamesArr = item.candidatesName === '' ? [] : item.candidatesName.split(",")
      })
      this.modelSteps = list.modelSteps
    },
    async submitStep(step) {
      if(!step.stepName) return this.$message.error('请输入步骤简称')
      if(!step.candidatesLimit) return this.$message.error('请输入限制人数')
      step.candidatesLimit = Number(step.candidatesLimit)
      if(!await this.$httpN.postB('hr/recruitment/model/stepUpdate', step)) return
      formUtil.submitSuccess('保存成功');
      this.getModelList();
    },
    selectDingUsers(id, name, ids, names, item, num){
      if(!this.canEdit) return
      this.complexPicker(num, [], item[ids]).then((data)=>{
        item[ids] = data.map(item => item.emplId);
        item[names] = data.map(item => item.name)
        item[name] = item[names].join(',');
        item[id] = item[ids].join(',')
      })
    },
    resetUsers(id, name, ids, names, item) {
      if(!this.canEdit) return
      item[ids] = []
      item[names] = []
      item[name] = ''
      item[id] = ''
    },
    //禁止滚动
    stopScrollFun(evt) {
      evt = evt || window.event;
      if(evt.preventDefault) {
        evt.preventDefault();
        evt.stopPropagation();
      } else {
        evt.cancelBubble=true;
        evt.returnValue = false;
      }
      return false;
    },
  }
}
</script>

<style lang='scss' scoped>
.content-wrapper {
  height: 100vh;
  .nav {
    display: flex;
    height: 50px;
    line-height: 50px;
    padding: 0 20px;
    justify-content: space-between;
    border-bottom: 1px solid #DCDFE6;
    .el-breadcrumb {
      display: flex;
      align-items: center;
      .el-breadcrumb__item {
        float: none;
      }
    }
  }
  .content {
    height: calc(100vh - 50px);
    overflow: auto;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .el-card {
      margin-bottom: 20px;
      width: 32%;
      min-width: 320px;
    }
  }
}
</style>